<template> <!-- 个人练习页面 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-position">
			<!-- 背景音乐 -->
			<view class="layout-music flex justify-end">
				<view class="text m-right-30">背景音乐</view>
				<u-switch v-model="switchValue" size="32"  @change="musicDo"></u-switch>
				<!-- activeColor="#4395f9" -->
			</view>
			<!-- 多方 -->
			<view class="layout-multiple flex justify-start flex-wrap">
				<view class="item third flex direction-column justify-center align-center"
					v-for="(item,index) in userList">
					<avatar-image :url="item.user.avatar_url" :width="120" />
					<view class="nickname text-single m-top-10">{{item.user.nick_name}}</view>
					<view class="score flex justify-center align-center">
						<view class="nmb">{{item.user_score}}</view>
						<block v-if="item.is_lock==1">


							<view class="sm add" v-if="item.is_right=='+10'">(+10)</view>
						
						</block>
					</view>
				</view>


			</view>
			<!-- 进度 -->
			<view class="layout-schedule m-top-30">
				<view class="countdown">{{countdown}}</view>
				<view class="nmb">
					随机题目『 <text class="current">{{tikuIndex+1}}</text> / {{total}} 』
				</view>
				<view class="schedule">
					<view class="active"></view>
				</view>
			</view>
			<!-- 答题 -->
			<view class="layout-topic m-top-20">
				<!-- 题目 -->
				<view class="title">
					{{title}}
				</view>
				<!-- 答案 -->
				<view class="result m-top-30">
					<view class="result-item" v-for="(item,index) in resultList" :key="index"
						@click="handResult(index)">
						<view class="icon true" v-if="item.is_right == 1 && resultIndex == index">
							<image class="full" src="/static/image/rtrue.png" mode=""></image>
						</view>
						<view
							:class="['text', {dui:item.is_right == 1 && resultIndex == index}, {cuo:!item.is_right && resultIndex == index}]">
							{{ item.content }}
						</view>
						<view class="icon false" v-if="!item.is_right && resultIndex == index">
							<image class="full" src="/static/image/rfalse.png" mode=""></image>
						</view>
					</view>
				</view>

			</view>
		</view>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import store from '@/store'
	import * as GameApi from '@/api/dati/game'
	import AvatarImage from '@/components/avatar-image'
	import * as GameRoomApi from '@/api/dati/room'
	import * as UserApi from '@/api/user'
	export default {
		components: {

			AvatarImage
		},
		data() {
			return {
				isLoading: true,
				userList: [],
				resultBtn: {
					color: '#ffffff',
					background: '#0197F8',
				},
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				switchValue: true,
				isResult: 0,
				resultIndex: -1,
				resultList: [

				],
				is_choose: false,
				tikuIndex: 0,
				tikuList: [],
				title: '',
				answer: '',
				desc: '',
				total: 0,
				roomId: 0,
				countdown: 20,
				countdowns:20,
				user_id: store.getters.userId,
				is_play:true,
				audio:null,
				audio_url:''
			};
		},
		onUnload() {
			if(this.audio){
				this.audio.stop();
			}
			console.log(45)
			clearInterval(this.timer);
		},
		onLoad(options) {
			this.getCountdown()
			this.roomId = options.roomId
			this.getUserList(options.roomId)
			this.getTikus(options.roomId)
			this.getUserInfo()

			//this.daojishi()
			this.handInit(options.roomId)
		},
		methods: {
			getCountdown() {
				GameApi.getCountdown()
					.then(result => {
						this.countdown = result.data.contdown
						this.countdowns = result.data.contdown
			
					})
			},
			musicDo(e){
				console.log(e)
				if(e==false){
				this.audio.stop();
				}else{
					if(!this.audio){
						var audio_url=this.audio_url
						this.skvido(audio_url)
					}else{
							this.audio.play();
					}
				
				}
			},
			
			getUserInfo() {
				UserApi.info()
					.then(result => {
						this.userInfo = result.data.userInfo
						this.audio_url=result.data.userInfo.audio_url
			
						if (result.data.userInfo.is_music) {
							this.skvido(result.data.userInfo.audio_url)
							this.switchValue = true
			
						} else {
							this.switchValue = false
						}
						this.isLoading=false
			
			
					})
			},
			skvido(audio_url) {
			
				console.log(556)
				// 创建音频对象
				this.audio = uni.createInnerAudioContext();
			
			
			
				// 设置音频源
				//this.audio.src = 'https://safe.gxgyl.com/uploads/bg.mp3';
					this.audio.src =audio_url;
			
			
			
				// 播放音频
				this.audio.play();
				this.is_play = true
			
				// 监听音频播放完成事件
				this.audio.onEnded(() => {
					//this.is_play = false
					this.skvido(audio_url)
					console.log('音频播放完成');
				});
			
				// 监听音频播放错误事件
				this.audio.onError((err) => {
					console.log('音频播放错误', err);
				});
				return
				let _this = this;
				plugin.textToSpeech({
					lang: "zh_CN",
					tts: true,
					content: _this.timu_title,
					success: function(res) {
						console.log("succ tts", res.filename)
			
						let music = null;
						music = uni.createInnerAudioContext(); //创建播放器对象
						music.src = res.filename;
						music.play(); //执行播放
						music.onEnded(() => {
			
							//播放结束
							//_this.is_play = false
							//music = null;
						});
					},
					fail: function(res) {
						// console.log("fail tts", res)
					}
				})
			},
			
			

			getUserList(roomId) {
				GameRoomApi.getUserList({
						roomId: roomId,
						user_id: 1
					})
					.then(result => {
						this.userList = result.data.userList
						this.isLoading = false

					})
			},
			getTikus(roomId) {
				GameRoomApi.tiku_list({
						roomId: roomId
					})
					.then(result => {
						this.tikuList = result.data.list
						this.total = result.data.list.length
						this.resultList = result.data.list[0].tiku.options
						this.title = result.data.list[0].tiku.title
						this.desc = result.data.list[0].tiku.desc
					})
			},
			//倒计时
			handInit(roomId) {
				const that = this

				// 开始倒计时
				this.countdown = this.countdowns;
				this.timer = setInterval(() => {
					this.countdown--;
					console.log(this.countdown)
					var tindex = this.tikuIndex
					var tiku_id = this.tikuList[tindex].tiku.tiku_id
					GameRoomApi.game_info({
						roomId: roomId,
						tiku_id: tiku_id
					}).then(result => {
						this.userList = result.data.userList

						// if (result.data.status == 3) {
						// 	//答题结束
						// 	uni.redirectTo({
						// 		url: '/pagesNew/multiple/result?roomId=' + this.roomId
						// 	})
						// }
						// if (result.data.status == 1) {
						// 	//下一题
						// 	var index = this.tikuIndex + 1
						// 	console.log('下一题')


						// 	this.resultIndex = -1

						// 	this.is_choose = false

						// 	var count = this.tikuList.length
						// 	this.tikuIndex = index
						// 	if (index == count) {
						// 		this.$u.route({
						// 			url: 'pagesNew/multiple/result?roomId=' + this.roomId,
						// 			type: 'redirectTo',
						// 		})
						// 		clearInterval(this.timer);
						// 	} else {
						// 		this.title = this.tikuList[index].tiku.title
						// 		this.desc = this.tikuList[index].tiku.desc
						// 		this.resultList = this.tikuList[index].tiku.options

						// 	}

						// 	this.countdown =  this.countdowns

						// }


					})
					if (this.countdown === 0) {
						console.log('下一题,倒计时结束')
						//更新全部答题情况
						this.updateNotAnswer(this.tikuIndex)



						var index = this.tikuIndex + 1



						var count = this.tikuList.length
						this.tikuIndex = index
						if (index == count) {
							clearInterval(this.timer);
							this.$u.route({
								url: 'pagesNew/multiple/result?roomId=' + this.roomId,
								type: 'redirectTo',
							})
							
						} else {
							this.title = this.tikuList[index].tiku.title
							this.desc = this.tikuList[index].tiku.desc
							this.resultList = this.tikuList[index].tiku.options

							this.resultIndex = -1

							this.is_choose = false

						}

						this.countdown =  this.countdowns

					}
				}, 1000);


			},


			// handResult(index) {
			// 	this.resultIndex = index
			// 	if (index > 1) {
			// 		this.isResult = 2
			// 	} else {
			// 		this.isResult = 1
			// 	}
			// 	const that = this
			// 	setTimeout(function() {
			// 		that.$u.route('/pagesNew/multiple/result')
			// 	}, 1500)
			// },

			// 模拟答案
			handResult(index) {
				if (this.is_choose == true) {
					return false
				}

				this.resultIndex = index
				var is_right = 0
				var content = ''
				this.is_show_desc = true
				this.resultList.forEach((item, tindex) => {

					if (item.is_right && index == tindex) {
						content = item.content
						is_right = 1
						this.user_left_score = '+10'
						var score = this.left_score
						score = Number(score) + 10
						this.left_score = score
						console.log('得分' + score)
					} else {
						content = item.content
						this.user_left_score = '-10'
					
						
					}
					if (index == tindex) {
						item.is_check = 1
					}
					return item
				})
				if(this.is_show_desc){
					if(this.userInfo.is_shake==1){
						
					
					uni.vibrateLong({
						success: function () {
							console.log('回答错误');
						}
					});
					}
				}

				//更新回答后端
				this.updateTiku(index, is_right, content)

				this.is_choose = true

			},
			updateTiku(index, is_right, content) {

				var values = {}
				var tindex = this.tikuIndex
				values.id = this.tikuList[tindex].tiku_id
				values.user_answer_index = index

				values.room_id = this.roomId
				values.is_right = is_right
				values.content = content
				values.tindex = tindex



				GameRoomApi.update_tiku(values)
					.then(result => {


					})



			},
			updateNotAnswer(index) {
			
				var values = {}
				var tindex = this.tikuIndex
				values.id = this.tikuList[tindex].tiku_id
				values.room_id = this.roomId
				GameRoomApi.update_tiku_no(values)
					.then(result => {
			
			
					})
			
			
			
			},

		},

	}
</script>

<style lang="scss">
	.hi {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-multiple {
		margin: 36rpx 40rpx 0;
		padding: 20rpx 0;
		border-radius: 10rpx;
		box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
		background-color: rgba(255, 255, 255, 0.1);

		.item {
			padding: 10rpx 0;

			.nickname {
				width: 100%;
				height: 32rpx;
				font-size: 32rpx;
				line-height: 32rpx;
				text-align: center;
				color: #101010;
			}

			.score {
				height: 60rpx;
				font-weight: 600;

				.nmb {
					font-size: 40rpx;
					color: #FC2A2A;
				}

				.sm {
					margin-left: 10rpx;
					font-size: 32rpx;
					color: #0197F8;
				}

				.add {
					color: #0197F8;
				}

				.sub {
					color: #FC2A2A;
				}
			}
		}
	}

	.layout-topic {
		padding: 20rpx 40rpx;

		.title {
			font-size: 36rpx;
			line-height: 48rpx;
			color: #101010;
		}

		.result-item {
			position: relative;
			display: flex;
			align-items: center;
			margin: 10rpx auto 0;
			width: 580rpx;
			height: 100rpx;
			padding-left: 100rpx;
			font-size: 36rpx;
			line-height: 44rpx;
			color: #ffffff;
			box-sizing: border-box;
			background-color:#0197f8;
			border-radius: 10rpx;

			.icon {
				position: absolute;
				top: 50%;
				z-index: 9;
				margin-top: -20rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.true {
				left: 10rpx;
			}

			.false {
				right: 10rpx;
			}

			.dui {
				color: #6BFF47;
			}

			.cuo {
				color: #FC2A2A;
			}
		}
	}

	.layout-schedule {
		position: relative;
		padding: 0rpx 36rpx;

		.countdown {
			position: relative;
			z-index: 10;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 122rpx;
			height: 122rpx;
			font-size: 48rpx;
			font-weight: bold;
			color: #FC2A2A;
			border-radius: 50%;
			border: 11rpx solid #aae0e0;
			box-sizing: border-box;
			background-image: linear-gradient(#5a8cd1, #5084cd);
			box-shadow: 0px 2px 6px 0px #85b2cf;
		}

		.nmb {
			position: absolute;
			left: 160rpx;
			top: 0;
			z-index: 8;
			font-size: 36rpx;
			line-height: 52rpx;
			color: #fff;

			.current {
				color: #FC2A2A;
			}
		}

		.schedule {
			position: absolute;
			left: 90rpx;
			bottom: 0;
			z-index: 8;
			width: 636rpx;
			height: 68rpx;
			border: 10rpx solid #79c0c6;
			border-radius: 34rpx;
			box-sizing: border-box;
			background-image: linear-gradient(#31757e, #4fc2b3, #2e7885);

			.active {
				width: 30%;
				height: 48rpx;
				border-radius: 28rpx;
				background-image: linear-gradient(#6cbaf8, #6ea8f1, #2858ad);
			}
		}
	}

	.btnbox {
		margin: 50rpx auto 0;
		width: 580rpx;

		.afterbtn {
			height: 80rpx;
			background: #0197F8;
			border-radius: 40rpx;
			border: none;
			font-size: 36rpx;
			font-weight: bold;
			color: #ffffff;
		}
	}

	.explain {
		margin: 36rpx auto;
		width: 540rpx;
		height: auto;
		padding: 20rpx 20rpx;
		border-radius: 10rpx;

		.title {
			font-size: 36rpx;
			line-height: 52rpx;
			color: #101010;
		}

		.red {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #FC2A2A;
		}

		.detail {
			font-size: 28rpx;
			line-height: 36rpx;
			color: #adadad;
		}
	}
</style>